<template>
  <div>
    <div>
      <el-select @change="processChange" clearable v-model="state.value">
        <el-option
          v-for="item in itemObject.fullData"
          :key="item.objectId"
          :label="item.objectName"
          :value="item.objectName"
        />
      </el-select>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, inject } from "vue";
import type { TableColumn, TableRow, OptButton } from "@/utils/baTable"; //表格列行类型
import type baTableClass from "@/utils/baTable";

const list = inject("list") as any;
const itemObject = inject("itemObject") as any;
const baTable = inject("baTable") as baTableClass;

// BuildAdmin将自动为此组件传递五个Props
interface Props {
  renderValue: any; // 单元格值
  renderRow: TableRow; // 当前行数据
  renderField: TableColumn; // 当前列数据
}

const props = withDefaults(defineProps<Props>(), {});

const state: {
  objectOptions: anyObj[];
  value: string | number;
} = reactive({
  objectOptions: [], //告警对象
  value: "",
});

const processChange = (value: any) => {
  state.value = value;
  if (value === "") {
    baTable.comSearch.form[props.renderField as any] = "";
  } else {
    baTable.comSearch.form[props.renderField as any] = value;
  }
};

onMounted(() => {
  console.log("TagVue单元格值", props.renderField.prop);
});
</script>
<style lang="scss" scoped>
.colorBlock {
  text-align: center;
  width: 30px;
  height: 20px;
  margin: 0 auto;
  color: aliceblue;
}
</style>
